<template>
	<view class="ikz-notice-box" v-if="showData.title">
		<view class="ikz-notice" :style="'margin-top:'+css_info.margin_top+'rpx;'">
			<view class="ikz-notice-left">
				<image class="ikz-notice-img" src="/static/index/notice.png"></image>
				<view class="ikz-notice-title"><!-- <text style="color:#F8636F ;">校园</text> --><text>公告</text></view>
			</view>
			<view class="ikz-notice-content" @click="openScreen">{{showData.title}}</view>
		</view>
	</view>
</template>

<script>
	import ikz from "@/pages/Common/tools"
	var app = getApp()
	export default {
		name: 'banner',
		props: {
			showData: {
				type: Object,
			},
			cssData: {
				type: Object,
			}
		},
		data() {
			return {
				css_info: {
					margin_top: 25,
				}
			};
		},
		watch: {
			showData: {
				handler(newName, oldName) {},
				immediate: true,
				deep: true
			},
			cssData: {
				handler(newName, oldName) {},
				immediate: true,
				deep: true
			}
		},
		mounted() {

		},
		methods: {
			bannerInfo() {
				this.banner_info = [{
						ban_img: '/static/banner/pic_home_banner1.png',
					},
					{
						ban_img: '/static/banner/pic_home_banner1.png',
					},
					{
						ban_img: '/static/banner/pic_home_banner1.png',
					}
				]
			},
			openScreen() {
				this.$emit('openScreen', {})
			}

		}
	};
</script>

<style>
	.ikz-notice-box {
		width: 93%;
		margin: 0 auto;
	}

	.ikz-notice {
		display: flex;
		align-items: center;
	}

	.ikz-notice-left {
		width: 20%;
		display: flex;
		align-items: center;
	}

	.ikz-notice-img {
		width: 35rpx;
		height: 35rpx;
	}

	.ikz-notice-title {
		padding-left: 8rpx;
		text-align: center;
		font-weight: 800;
	}

	.ikz-notice-content {
		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #888;
		font-size: 28rpx;
	}
</style>
